<template>
	<view>
		<view v-if="userinfo.isLogin" class="box pd16_15">
			<navigator url="/pages/client/vipcard/index">
				<view class="home-vip-tag-box">
					<image class="bg" v-if="Info.status==1" :src="statics.vipbg"></image>
					<image class="bg" :src="statics.vipBgHas"></image>
					<view v-if="Info.status==1" class="main plr15 flex alcenter space">
						<view class="tag-no-vip">{{$t('text.user1')}}</view>
						<view class="flex alcenter">
							<text class="ft12 cl-default mr15 ftw500">{{$t('text.vip1')}}</text>
							<image class="right-icon" :src="statics.rightIcon"></image>
						</view>
					</view>

					<view v-if="Info.status==3" class="main plr15 flex alcenter space">
						<view class="tag-has-vip flex alcenter center">
							<image class="vip-level-icon" :src="statics.vipLevelImg[0]"></image>
							<text class="vip-level-means">VIP</text>
						</view>
						<view class="flex alcenter">
							<!-- <view  class="ft12 cl-default mr15 ftw500">{{$t('text.vip3')}}<br>{{$t('text.time1')}} {{Info.end_time}}</view> -->
							<view class="ft12 cl-default mr15 ftw500">{{$t('text.vip3')}}<br></view>
							<image class="right-icon" :src="statics.rightIcon"></image>
						</view>
					</view>
					<!-- <image class="bg" v-if="Info.status==2" :src="statics.vipbg"></image>
					<image class="bg" :src="statics.vipBgHas"></image>
					<view v-if="Info.status==1" class="main plr15 flex alcenter space">
						<view class="tag-no-vip">{{$t('text.user1')}}</view>
						<view class="flex alcenter">
							<text class="ft12 cl-default mr15 ftw500">{{$t('text.vip4')}}</text>
							<image class="right-icon" :src="statics.rightIcon"></image>
						</view>
					</view> -->

				</view>
			</navigator>
			<view class="mt24 flex space">
				<!-- <view class="col3 text-center">
					 <navigator url="/pages/client/vipcard/moneylog">
					 <view class="cl-notice ft12">{{$t('play.balance')}}</view>
					 <view class="mt8 ft20 ftw600 cl-w">{{userinfo.money}}</view>
					 </navigator>
				 </view> -->

				<view class="col3 text-center" style="display: none;">
					<!-- <navigator url="/pages/client/coupon/mine/index"> -->
					<view class="cl-notice ft12">{{$t('play.discount')}}</view>
					<view class="mt8 ft20 ftw600 cl-w">0</view>
					<!-- </navigator> -->
				</view>

				<view class="col3 text-center">
					<navigator url="/pages/client/vipcard/integrallog">
						<view class="cl-notice ft12">{{$t('navbar.integral')}}</view>
						<view class="mt8 ft20 ftw600 cl-w">{{userinfo.score}}</view>
					</navigator>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view @click="showQrcodeAct" v-if="userinfo.config.iskq==1" class="vip-qrcode-tag" :style="getBtnStyle">
					<!-- <text class="iconfont iconbtn_card_ma-copy ft20 cl-w"></text> -->
					<image style="width: 50upx; height: 50upx;" src="/static/share-fill.png"></image>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view @click="wdfxm" v-if="userinfo.config.iskq==1" class="vip-qrcode-tag" :style="getBtnStyle">
					<text class="iconfont iconbtn_card_ma-copy ft20 cl-w"></text>
				</view>
				<!-- #endif -->
			</view>

			<view class="flex space alcenter  mt24" style="padding-bottom: 16rpx;">
				<view class="flex alcenter">
					<!-- 充值关闭 -->
					<!-- <navigator url="/pages/client/vipcard/recharge">
						<view class="btn-vip-money" :style="getBtnStyle">{{$t('text.recharge')}}</view>
					 </navigator> -->
					<!-- 		 <navigator v-if="userinfo.zstx>0" url="/pages/client/member/tx">
						<view class="btn-vip-adviser ml15" :style="getBtnPlanStyle">{{$t('share.withdraw')}}</view>
					 </navigator> -->
				</view>

			</view>
		</view>
		<view v-else class="box pd24_15">
			<view class="text-center ft14 cl-info2">{{$t('text.vip7')}}</view>
			<view class="flex center mt24">
				<button class="btn-mid" @click="loginAct" :style="getBtnStyle">{{$t('text.ljup')}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['userinfo', 'Info'],
		data() {
			return {
				configs: {
					imgUrl: 'https://rl.rollingshort.net', // 配置的基础图片URL
					cdnUrl: 'http://d19z6whh1hpncj.cloudfront.net'
				},
				isLogin: true,
				vipLevel: 0, //普通用户

			}
		},
		onLoad() {

		},
		methods: {
			loginAct() {
				this.$emit('loginAct');
			},
			showQrcodeAct() {
				this.$emit('qrcode');
			},
			wdfxm() {
				uni.navigateTo({
					url: '/pages/client/member/qrshare'
				})
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		background: #1f1f1f;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		display: inline-block;
	}

	.home-vip-tag-box {
		height: 100rpx;
		width: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.home-vip-tag-box .main {
		width: 100%;
		height: 100rpx;
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
	}

	.home-vip-tag-box .bg {
		width: 100%;
		height: 100rpx;
	}

	.tag-no-vip {
		width: 128rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #8A8D99;
		text-align: center;
		line-height: 40rpx;
	}

	.tag-has-vip {
		width: 200rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #333333 0%, #000000 100%);
		border-radius: 20rpx;
	}

	.tag-has-vip .vip-level-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.tag-has-vip .vip-level-means {
		font-size: 24rpx;
		margin-left: 8rpx;
		font-weight: 500;
		background: linear-gradient(180deg, #F2DCA9 0%, #C79556 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.home-vip-tag-box .main .right-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.vip-qrcode-tag {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-vip-money,
	.btn-vip-adviser {
		width: 208rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #FFFFFF;
	}
</style>